<template>
    <div class="collect">
        <Title>收藏夹</Title>
        <div class="table">
            <el-table :data="collect.list" border style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="id" label="ID" width="50" />
                <el-table-column prop="goods" label="商品" width="400">
                    <template #default="scope">
                        <span style="cursor: pointer" @click="toDetail(scope.row.goods_id)">{{ scope.row.goods }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.row.id)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import Title from '@/components/Title.vue'
import { formatPrice } from '@/utils/formatPrice'
import { useRouter } from 'vue-router'
import { getCollectList,deleteCollect } from '@/api/collect'
import { useUserStore } from '@/stores/useUser'
import {ElMessage} from 'element-plus'

const userStore = useUserStore()

const router = useRouter()

const collect = reactive({
    list: []
})

//删除收藏
const deleteRow = (id) => {
    deleteCollect({
        id
    }).then(res => {
        if(res.data.code === 200){
            ElMessage.success(res.data.message)
            getList()
        }else{
            ElMessage.error(res.data.message)
        }
    })
}

//获取收藏列表
const getList = () => {
    getCollectList({
        user_id: userStore.userinfo.id
    }).then(res => {
        if (res.data.code == 200) {
            collect.list = res.data.books
        }
        else {
            ElMessage.error(res.data.message)
        }
    })
}

getList()

//跳转详情页
const toDetail = (id) => {
    router.push('/detail/' + id)
}

</script>

<style scoped lang='less'>
.collect {
    height:100%;
    .table {
        margin-top: 20px;
        height:600px;
        overflow-y:auto;
    }
}
</style>